<script setup lang="ts">

import {CirclePlus, Close} from "@element-plus/icons-vue";
import {computed, ref} from "vue";
import {invoke} from "@tauri-apps/api/core";
import apis from "../http/apis.ts";
import {useUserFriendsStore} from "../stores/user_friends.ts";
import {storeToRefs} from "pinia";
import {UserInfoType} from "../types/types.ts";
import {useUserStore} from "../stores/user.ts";
const searchUsersFromServer = ref([]);
const showSearch: string = ref("none");
const searchText: string = ref("");
const {friends} = storeToRefs(useUserFriendsStore());
let userInfo:UserInfoType = useUserStore().userInfo;
defineProps({
  size: {
    type: Number,
    default: 25
  }
});
function addToFriends(user) {
  friends.value = [user, ...friends.value];
  invoke("add_friend", {account: userInfo.account, user: user}).then((res) => {
    console.log("add_friend successfully ");
  });
}
function search_user() {
  console.log("search_user searchText: " + searchText.value);
  apis.searchUsers({searchText: searchText.value}).then((res) => {
    console.log("search_user res: " + res);
    searchUsersFromServer.value = res;
  })
}
const searchUsersHandled:Array<object> = computed(() => {
  let users: object[] = [];
  searchUsersFromServer.value.forEach(user => {
    let isFriend = false;
    //console.log("friends: " + JSON.stringify(friends));
    friends.value.forEach(friend => {
      if (user.account == friend.account) {
        isFriend = true;
      }
    })
    if (!isFriend) {
      if (users.length < 3) {
        users.push(user);
      }
    }
  });
  //console.log("searchUsersHandled: " + JSON.stringify(users));
  return users;
});
</script>

<template>
  <div class="el-aside-two-search">
    <el-input
        v-model="searchText"
        style="width: 200px"
        size="small"
        placeholder="搜索"
        prefix-icon="Search"
        clearable
        @keyup.enter="showSearch = '';search_user();searchText = '';"
        @clear="searchText = '';showSearch = 'none';searchUsersHandled.value = [];"
    />
    <el-icon style="margin-left: 10px" :size="size">
      <CirclePlus/>
    </el-icon>
  </div>
  <el-card
      style="position: absolute;max-height: 230px;top:50px;margin-left: 20px;width: 225px;overflow-y: scroll;z-index: 100"
      :style="{'display': showSearch}">
    <template #header>
      <div class="card-header" style="align-items: center;justify-content: flex-start;display: flex">
        <el-icon :size="size" style="cursor: pointer"
                 @click="showSearch = 'none';searchUsersFromServer = [];">
          <Close/>
        </el-icon>
        <span> 搜索结果</span>
      </div>
    </template>
    <div class="el-aside-two-item-1" v-for="(user) in searchUsersHandled"
         @click="addToFriends(user);showSearch = 'none';searchText = '';searchUsersFromServer = [];">
      <el-avatar :size="size + 10" shape="square" :src="'/avatar/001.png'"/>
      <div class="el-aside-two-item-right-1">
        <div class="el-aside-two-item-right-top-1">
          <div style="font-size: 12px;font-weight: bold;flex: 1">{{ user.account }}</div>
          <div style="font-size: 10px; color: #999999;flex: 1;text-align: right">上午10:00</div>
        </div>
        <span style="font-size: 12px; color: rgb(60, 60, 60);"
              class="text-ellipsis">你好？</span>
      </div>
    </div>
  </el-card>
</template>

<style scoped>
.el-aside-two-search {
  height: 50px;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  display: flex;
}

.el-aside-two-item-1 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  cursor: pointer;
}

.el-aside-two-item-right-1 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-left: 10px;
  flex: 1;
}

.el-aside-two-item-right-top-1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.text-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>